<template>
  <view class="uni-nav">
    <view :style="{ height: statusBarHeight }" class="uni-status-bar"> </view>
    <view class="uni-bar-bar">
      <view class="uni-title">
        <slot></slot>
      </view>
      <view class="uni-left-item">
        <view
          class="img-back"
          @click.stop="back()"
          :class="{ 'touch-btn': backSelect }"
          @touchstart="touchBack(1)"
          @touchend="touchBack(0)"
        >
          <image
            src="/static/icon/icon_back.png"
            mode="aspectFit"
            class="uni-back"
          />
        </view>
        <view class="uni-center"></view>
        <view
          class="img-back"
          @click.stop="home()"
          :class="{ 'touch-btn': homeSelect }"
          @touchstart="touchHome(1)"
          @touchend="touchHome(0)"
        >
          <image
            src="/static/icon/icon_home.png"
            mode="aspectFit"
            class="uni-home"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { PageUtil } from "@/util/page";
export default {
  name: "UniStatusBar",
  data() {
    return {
      backSelect: 0,
      homeSelect: 0,
    };
  },
  methods: {
    back() {
      PageUtil.popPage();
    },
    home() {
      PageUtil.switchPage("/pages/home/index");
    },
    touchBack(backSelect) {
      this.backSelect = backSelect;
    },
    touchHome(homeSelect) {
      this.homeSelect = homeSelect;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "css/common.scss";
.uni-nav {
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: white;
  .uni-status-bar {
    // width: 750rpx;
    height: 20px;
    // height: var(--status-bar-height);
  }
  .uni-bar-bar {
    height: $nav-height;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .uni-title {
      margin: 0 50px;
      color: #000000;
      line-height: 20px;
      font-size: 17px;
    }
    .uni-left-item {
      position: absolute;
      left: 16px;
      top: 6px;
      width: 87px;
      height: 32px;
      border-radius: 25px;
      border: 1px solid rgba(151, 151, 151, 0.2);
      display: flex;
      justify-content: space-around;
      align-items: center;
      overflow: hidden;
      .img-back {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .img-back:first-of-type {
        padding-left: 8px;
      }
      .img-back:last-of-type {
        padding-right: 8px;
      }
      .touch-btn {
        background: rgb(153, 153, 153);
      }
      .uni-back {
        width: 9px;
        height: 18px;
      }
      .uni-center {
        width: 1px;
        height: 19px;
        background: rgba(0, 0, 0, 0.2);
      }
      .uni-home {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>
